
$(function () {
    //添加用户方法
    insertUser();
    //详情的方法
    XiangQing();
    //删除用户信息
    DeleteUserById();
    //点击图片触发文件上传
    $("#photo").click(function () {
        //只触发点击事件的文件上传
        $("#img").click();
    });
    //文件上传图片赋值
    $("#img").change(function () {
        //得到文件上传把它便变成js对象
        let file = $(this)[0].files[0];
        //把文件上传变成一个路劲
        let imgUrl = URL.createObjectURL(file);
        //赋值
        $("#photo").prop("src", imgUrl);
    });
    //查询全部用户
    $.get(
        "../UserQuery",
        function (msg) {
            let users = msg.data;
            for (let i = 0; i < users.length; i++) {
                let tr = $(`<tr>
                        <td class="d-none d-md-table-cell user-img">
                            <img src="` + '../' + users[i].photo + `" class="img-circle" />
                        </td>
                        <td>` + users[i].login + `</td>
                        <td>` + users[i].name + `</td>
                        <td class="d-none d-md-table-cell">` + users[i].sex + `</td>
                        <td class="d-none d-md-table-cell">` + users[i].phone + `</td>
                        <td class="d-none d-md-table-cell">` + users[i].birthday + `</td>
                        <td>
                             <i class="glyphicon-user ${users[i].master == 2 ? "text-primary" : " text-muted"}"></i>                    
                            <span class="d-none d-md-inline">${users[i].master == 1 ? "用户" : "管理员"}</span>
                        </td>
                        <td class="dropdown" width="80">
                            <button data-toggle="dropdown" class="btn btn-sm btn-outline-primary dropdown-toggle py-0">管理</button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a href="#modal-show-user" data-num="${users[i].id}" data-toggle="modal" class="dropdown-item sava">详细</a>
                                <a href="#modal-edit-user" data-num="${users[i].id}" data-toggle="modal" class="dropdown-item sava">编辑</a>
                                <div class="dropdown-divider"></div>
                                <a href="" data-toggle="del" class="dropdown-item text-danger update" data-num="${users[i].id}">删除</a>
                            </div>
                        </td>
                    </tr>`);
                //追加到tbody里面
                $("#body-div").append(tr);
            }
        },
        "json"
    )

});

//添加用户
function insertUser() {
    //验证账号是否存在
    $("#form-add-user [name=login]").blur(function () {
        var login = $('[name=login]').val();
        if (login.replace(/\s/g, "").length == 0) {
            alert("用户名不能为空");
            return false;
        }
        var nameTest = /\s/;
        if (nameTest.test(login)) {
            alert("用户名中不能带有空格");
            return false;
        }
        $.get(
            "../yanZheng",
            {login:login},
            function (resp){
                if (resp.data===1){
                    $("#login-error-message").text("* 用户名不可用用");
                    $("#login-error-message").css("color","red");
                    $("#login-error-message").prop("disabled",true);
                }else {
                    $("#login-error-message").text("用户名可用");
                    $("#login-error-message").css("color","blue");
                    $("#login-error-message").prop("disabled",false);
                }
            },
            "json"
        )
    });
    //添加用户并且验证数据
    $("#tj-btn").click(function  (){
        //用户姓名
        var name=$('[name=name]').val();
        if(name.replace(/\s/g,"").length==0){
            alert("用户姓名不能为空");
            $("#tj-btn").attr("disable",true);
            return false;
        }
        var nameTest=/\s/;
        if(nameTest.test(name)){
            alert("用户姓名中不能带有空格");
            $("#tj-btn").attr("disable",true);
            return false;
        }
        //js验证
        //验证数据
        //变成js对象
        //封装成formdata
        let datas=$("#form-add-user")[0];
        let formData = new FormData(datas);
        console.log(datas+'lll');
        console.log(formData);

        $.ajax({
            type: "post",
            url: "../HtmlUserAdd",
            data:formData,
            processData:false,
            contentType:false,
            success:function (msg){
                if (msg.data==1){
                    alert("添加数据成功，即将回到html/user.html页面");
                    //返回登录页面
                    location.href="user.html";
                }else {
                    alert("数据有误请重新尝试");
                }
            }
        });
        return false;
    });
}
//添加结束

//详情展示//和修改
function XiangQing(){
    $("#body-div").on("click","tr > td > div > .sava",function (){
        let id = $(this).data("num");
        let name = $(this).text();
        if(name=="详细"){
            $("#XiangQing").text(" ");
            $.get(
                "../HtmlUserQueryById",
                {id:id},
                function (msg){
                    let user=msg.data;
                    console.log(user);
                    let tr=$(`<div class="col-md-4">
                                        <div class="form-group">
                                            <img src="../${user.photo}" class="img-thumbnail img-circle" />
                                        </div>
                                  </div>

                                  <div class="col-md">
                                        <div class="form-row">
                                            <label class="col-form-label pr-1">用户名：</label>
                                        <div class="col form-control-plaintext">${user.login}</div>
                                  </div>
                                       <div class="form-row">
                                            <label class="col-form-label pr-3 mr-1">姓名：</label>
                                       <div class="col form-control-plaintext">${user.name}</div>
                                        </div>
                                  <div class="form-row">
                                        <label class="col-form-label pr-3 mr-1">性别：</label>
                                        <div class="col form-control-plaintext">${user.sex=='男'?"男":"女"}</div>
                                  </div>
                                        <div class="form-row">
                                            <label class="col-form-label pr-3 mr-1">生日：</label>
                                            <div class="col form-control-plaintext">${user.birthday}</div>
                                        </div>
                                        <div class="form-row">
                                            <label class="col-form-label pr-3 mr-1">角色：</label>
                                            <div class="col form-control-plaintext">${user.master==1?"用户":"管理员"}</div>
                                        </div>
                                  </div>`);

                    //追加到详情模态框里面
                    $("#XiangQing").append(tr);
                },
                "json"
            );
        }else {
            $.get(
                "../HtmlUserQueryById",
                {id: id},
                function (msg) {
                    let user = msg.data;
                    //点击图片触发文件上传
                    $("#photo-update").click(function (){
                        //只触发点击事件的文件上传
                        $("#img-update").click();
                    });
                    //文件上传图片赋值
                    $("#img-update").change(function (){
                        //得到文件上传把它便变成js对象
                        let file= $(this)[0].files[0];
                        //把文件上传变成一个路劲
                        let imgUrl = URL.createObjectURL(file);
                        //赋值
                        $("#photo-update").prop("src",imgUrl);
                    });

                    //验证账号是否存在
                    $("#form-edit-user [name=login]").blur(function (){
                        var login=$('#form-edit-user [name=login]').val();
                        /*if(login.replace(/\s/g,"").length==0){
                            alert("用户名不能为空");
                            return false;
                        }
                        var nameTest=/\s/;
                        if(nameTest.test(login)){
                            alert("用户名中不能带有空格");
                            return false;
                        }*/
                        $.get(
                            "../yanZheng",
                            {login:login},
                            function (resp){
                                if (resp.data===1){
                                    $("#login-error-update").text("* 用户名不可用用");
                                    $("#login-error-update").css("color","red");
                                    $("#login-error-update").prop("disabled",true);
                                }else {
                                    $("#login-error-update").text("用户名可用");
                                    $("#login-error-update").css("color","blue");
                                    $("#login-error-update").prop("disabled",false);
                                }
                            },
                            "json"
                        )
                    });

                    //点击修改按钮提交数据
                    $("#gx-btn").click(function  (){
                        //用户姓名
                        var name=$('#form-edit-user [name=name]').val();
                       /* if(name.replace(/\s/g,"").length==0){
                            alert("姓名不能为空");
                            $("#tj-btn").attr("disable",true);
                            return false;
                        }
                        var nameTest=/\s/;
                        if(nameTest.test(name)){
                            alert("用户姓名中不能带有空格");
                            $("#tj-btn").attr("disable",true);
                            return false;
                        }*/
                        //js验证
                        //验证数据
                        //变成js对象
                        //封装成formdata
                        let datas=$("#form-edit-user")[0];
                        let formData = new FormData(datas);
                        console.log(datas+'lll');
                        console.log(formData);

                        $.ajax({
                            type: "post",
                            url: "../HtmlUpdateUser",
                            data:formData,
                            processData:false,
                            contentType:false,
                            success:function (msg){
                                if (msg.data==1){
                                    alert("修数据成功，即将回到html/user.html页面");
                                    location.href="user.html";
                                }else {
                                    alert("数据有误请重新尝试");
                                }
                            }
                        });
                        return false;
                    });
                    //赋值
                    $("#form-edit-user [name=id]").val(user.id);
                    $("#form-edit-user [name=login]").val(user.login);
                    $("#form-edit-user [name=name]").val(user.name);
                    $('#form-edit-user [name=sex]').each(function () {
                        if ($(this).val() == user.sex) {
                            $(this).prop("checked", true);
                        }
                    });
                    $("#form-edit-user [name=birthday]").val(user.birthday);
                    $('#form-edit-user [name=master]').each(function () {
                        if ($(this).val() == user.master) {
                            $(this).prop("checked", true);
                        }
                    });
                    $("#photo-update").attr("src",'../'+user.photo);
                },
                "json"
            );
        }

    })
}

//删除
function DeleteUserById(){
    $("#body-div").on("click","tr > td > div > .update",function (){
        //拿到自定义属性带的id
      let id = $(this).data("num");
      if (confirm("确定删除吗")){
            $.get(
                "../HtmlUserDeleteById",
                {id:id},
                function (msg){
                    if (msg==1){
                        //刷新页面
                      location.reload();
                    }else {
                        alert("数据有误");
                    }
                },
                "json"
            )
         }
    });
}

